<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>立即投资</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="#(assets)/css/weui.css"/>
<link rel="stylesheet" href="#(assets)/css/weui2.css"/>
<script type="text/javascript" src="#(path)/assets/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="#(path)/assets/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="#(assets)/js/layer/layer.js"></script>
<script src="#(assets)/js/zepto.min.js"></script>
<script>window.$$=window.Zepto = Zepto</script>
<script src="#(assets)/js/fx.js"></script>
#@checkToken()
</head>
<body ontouchstart class="page-bg" style="background:#f2f6f9">
	<div align="center" style="width:100%;height:60px;background:#FFF">
		 
		<div align="center" style="font-size:14px;color:#626262;margin-top:0px;">
			<div align="center" style="float:left;width:33%;margin-top:10px;border-right:1px solid #f0f0f0">
				<div>账户余额</div>
				<div><a id="availableAmount" style="color:#3ec9b4"></a></div>
			</div>
			<div align="center" style="float:left;width:33%;margin-top:10px;border-right:1px solid #f0f0f0">
				<div>可投金额</div>
				<div><a id="ableamount" style="color:#3ec9b4"></a></div>
			</div>
			<div align="center" style="float:left;width:33%;margin-top:15px;">
				<div onclick="window.location.href='#(path)/app/page/personal-deposit'" style="width:70px;height:30px;line-height:30px;color:#fff;border-radius:5px;background:#3ec9b4">充值</div>
			</div> 
		</div>
	</div>
	<div style="width:100%;height:30px;margin:5px 0 5px 0;background:#FFF;line-height:30px;font-size:14px;">
		<div align="center" style="float:left;width:50%;">
			<span id="least_unit"></span>
		</div>
		<div align="center" style="float:left;width:50%;">
			<span id="unit_amount"></span>元/份
		</div>
	</div>
	
	<div align="center" style="width:100%;padding-bottom:20px;background:#FFF">
		<div style="width:90%;height:40px;border-bottom:1px solid #f0f0f0;line-height:40px;">
			<div style="float:left"><a style="color:#626262">预期收益:</a></div>
			<div style="float:right"><a id="yq_amount" style="color:#626262;margin-right:20px;">0.00</a>元</div>
		</div>
		<div style="width:90%;height:40px;line-height:40px;"> 
			<div style="float:left"><a style="color:#626262">投资份数:</a></div>
			<div style="float:right"><a hidden id="sliderValue"></a><input id="fenshu" style="font-size:16px;border:0px;background:#f2f6f9;height:30px;margin-right:10px;padding-left:5px;">份</div>  
		</div>
		<!--滑动按钮--> 
		<div align="left" class="page-bd" style="clear:both;width:100%;">
			 <div class="page-bd">
				<div class="weui-slider-box">
					<div class="weui-slider">
						<div id="sliderInner" class="weui-slider-inner">
							<div id="sliderTrack" style="width: 50%;background:#3ec9b4" class="weui-slider-track"></div>
							<div id="sliderHandler" style="left:50%;width:12px;height:12px;margin-top:-8px;margin-left:-10px;border:2px solid #3ec9b4" class="weui-slider-handler"></div>
						</div>
					</div>
				</div> 
			</div>
			<span style="font-size:13px;float:right;margin-top:-10px;margin-right:20px;">滑动选择投资份数</span>
		</div>
		<div id="investProm_jiaxi" style="width:90%;clear:both;height:40px;line-height:40px;">
			<div style="float:left"><a style="color:#626262">优惠券券</a></div>
			<div style="float:right">
				<span id="yhq_num" style="font-size:13px;color:#3ec9b4;"></span>
				<img id="investProm_jia" style="vertical-align:middle;height:16px;"src="#(assets)/images/mobile/personal_jiantou2.png">
			</div>
		</div>
		<div hidden id="investProm_jialist" style="width:100%;">
			<div id="alllist" align="center" style=""></div>
			<div id="showlists"></div>	 
		</div> 
    </div>
	<div align="center" style="margin-top:40px;">   
		<div id="subbutton" style="height:50px;width:90%;background:#3ec9b4;line-height:50px;color:#FFF;border-radius:25px;">
			<img id="investDetail_subimg" style="height:50px;float:left" src="/assets/images/mobile/investDetail_button1.png">
			<span id="investProm_sumbit">立即投资</span>
			<img id="investDetail_subimg" style="height:50px;float:right" src="/assets/images/mobile/investDetail_button3.png">
		</div>
	</div>

	
	
	
	
	<div align="center" style="clear:both;font-size:12px;width:100%;color:#666">市场有风险，投资需谨慎</div>
	<div align="center" style="clear:both;height:30px;background:#f2f6f9">
		<img style="height:18px;margin-top:6px" src="/assets/images/mobile/investDetail_yhcg.png">
	</div> 
	<!--信息确认弹框-->
	<div id="investProm_mengban"  hidden style="background-color:rgba(0,0,0,0.4);position:absolute;top:0;width:100%;height:100%;z-index:550"><div>
	<div align="center" hidden  id="investProm_tishi" style="margin-left:5%;background:#FFF;height:305px;width:90%;position:absolute;top:100px;z-index:600;border-radius:10px;font-size:14px;">
		<div align="center" style="width:100%;line-height:49px;height:49px;border-bottom:1px solid #eee;font-size:16px;">
			<a style="color:#626262">投资确认</a>
		</div>
		<div style="width:100%;line-height:40px;height:40px;">
			<div align="left" style="margin-left:10%;float:left;">投资标的：<span id="name"></span></div>
		</div>
		<div style="width:100%;line-height:40px;height:40px;border-top:1px solid #e6e6e6">
			<div align="left" style="margin-left:10%;float:left;">投资份数：<span id="fenshu2"></span></div>
		</div>
		<div style="width:100%;line-height:40px;height:40px;border-top:1px solid #e6e6e6">
			<div align="left" style="margin-left:10%;float:left;">投资金额：<span id="tz_amount"></span></div>
		</div>
		<div style="width:100%;line-height:40px;height:40px;border-top:1px solid #e6e6e6">
			<div align="left" style="margin-left:10%;float:left;">预期收益：<span id="yq_amount2"></span></div>
		</div>
		<div style="width:100%;line-height:40px;height:40px;border-top:1px solid #e6e6e6">
			<div align="left" style="margin-left:10%;float:left;">优惠券：<span id="yhq_num2"></span></div>
		</div>
		<div align="center" style="clear:both;width:100%;line-height:49px;height:49px;border-top:1px solid #e6e6e6">
			<div id="investProm_OK" align="center" style="float:left;width:49%;height:49px;border-right:1px solid #e6e6e6">确认</div>
			<div id="investProm_passforse" align="center" style="float:right;width:49%;height:49px">取消</div>
		</div>
	</div>
<script id="demo" type="text/x-jquery-tmpl">
	<div align="center" pass="${coupon_id}" class="pass" pass2="${amount}" pass3="${types}" pass4="${yhq_type}" style="clear:both;margin-top:10px;background:#FFF;width:100%;">
		<div style="width:96%;height:70px;margin-top:10px;border:1px solid #b8b8b8;border-radius:10px">
		<div style="border-bottom:1px dashed #000;height:34px;">
			<div style="float:left;margin-left:10px;line-height:34px;font-size:14px;">${amount}</div>
			<div style="float:left;font-size:12px;margin-left:10px;line-height:34px;">失效时间：${create_time}</div>
			<div style="float:right;margin-right:10px;"><img style="width:20px;" src="${url1}"></div>
		</div>
		<img style="width:40px;float:right;margin-top:-15px" src="#(assets)/images/mobile/reward_shixiao.png"> 
		<div>
			<div align="left" style="font-size:12px;margin-left:10px;line-height:17px;">${allow_bid}</div>
			<div align="left" style="font-size:12px;margin-left:10px;line-height:17px;">满${limit_amount}元可用</div>
		</div>
	</div> 
</script>   
<script type="text/javascript" src="/assets/dropload/dropload.min.js"></script>
<link rel="stylesheet" href="/assets/dropload/dropload.css">
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>  
<script>
	//数据获取
	var ip_l=returnCitySN["cip"];
	var id = GetRequest()["id"];
	var ableNumber = 0;
	var ratas = 0;
	var unit_amount = 0;
	var day_limit = 0;
	var couponid = "";
	var yhq_type ="";
	var url ="#(path)/bid/toTrade?token=#(session.token??)&id="+id;
	$.getJSON(url, function(data) {
		console.log(data);
		var datainfo2 = data. data.item;
		$("#least_unit").html(datainfo2.least_unit + "份起投");
		$("#unit_amount").html(datainfo2.unit_amount + "元/份");
		$("#name").html(datainfo2.name);
		day_limit = datainfo2.day_limit;
		unit_amount = datainfo2.unit_amount;
		ratas = Number(datainfo2.rate) + Number(datainfo2.plus_rate);
		$("#availableAmount").html(data.data.user.availableAmount);
		
		ableNumber = datainfo2.unit - datainfo2.avunit;
		if(ableNumber==0){
			$("#sliderHandler").css("left","0"); 
			$("#sliderTrack").css("width","0");
		}
		$("#ableamount").html(ableNumber*datainfo2.unit_amount);
		console.log(ableNumber);
		var ableNumber2 = Math.floor((ableNumber-1)/2);
		if(ableNumber2 < 0){
			$("#fenshu").val(0);
		}else{
			$("#fenshu").val(Math.floor((ableNumber-1)/2));
		} 
		var amount = $("#fenshu").val() * unit_amount;
		var yq_amount = (Number(amount)* Number(ratas) / 100 * day_limit / 360).toFixed(2);
		$("#yq_amount").html(yq_amount);
		//判断有无优惠券
		if(data.data.coupon.length ==0 ){
			$("#yhq_num").html("您无可用优惠券");
		}else{
			$("#yhq_num").html("您有可用优惠券，请选择");
			$.each(data.data.coupon, function(i, item){ 
				console.log(item);
				if(item.type=="jxq"){
					var url1 = "#(assets)/images/mobile/reward_1.png";
					var amount = item.amount + "%";
					var types = "加息券";
				}else if(item.type=="tyj"){
					var url1 = "#(assets)/images/mobile/reward_3.png";
					var amount = item.amount + "元";
					var types = "体验金";
				}else if(item.type=="tzhb"){
					var url1 = "#(assets)/images/mobile/reward_2.png"; 
					var amount = item.amount + "元";
					var types = "投资红包";
				}
				var invests = {coupon_id:item.coupon_id,yhq_type:item.type,types:types,url1:url1,amount:amount,create_time:item.create_time,allow_bid:item.allow_bid,limit_amount:item.limit_amount};
				$("#demo").tmpl(invests).appendTo('#alllist');
			});
		}
		//展示优惠券
		$("#investProm_jiaxi").click(function(){
			$("#investProm_jialist").toggle();
			console.log(data);
			var node=$('#investProm_jialist');
			if(node.is(':hidden')){　　//如果node是隐藏的则显示node元素，否则隐藏
			　　$("#investProm_jia").attr("src","#(assets)/images/mobile/personal_jiantou2.png");
			}else{
			　　$("#investProm_jia").attr("src","#(assets)/images/mobile/personal_jiantou3.png");
			}			
		});	
		//选择优惠券
		$(".pass").click(function(){
			var that = $(this);
			couponid = that.attr("pass");
			yhq_type2 = that.attr("pass4");
			var aaa = that.attr("pass2") + "(" + that.attr("pass3") + ")";
			console.log(aaa);
			$("#investProm_jialist").hide();
			$("#yhq_num").html(aaa); 
		});
	});
 
	//获取ID
	function GetRequest() {   
	   var url = location.search; //获取url中"?"符后的字串  
	   var theRequest = new Object();  
	   if (url.indexOf("?") != -1) {  
		  var str = url.substr(1);  
		  strs = str.split("&");  
		  for(var i = 0; i < strs.length; i ++) {  
			 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
		  }  
	   }  
	   return theRequest;  
	}  
	//立即投资 
	$("#investProm_sumbit").unbind().click(function(){
		$("#fenshu2").html($("#fenshu").val() + "份");
		$("#tz_amount").html(unit_amount * $("#fenshu").val() + "元");
		$("#yq_amount2").html($("#yq_amount").html()+"元");
		$("#yhq_num2").html($("#yhq_num").html());
		$("#investProm_mengban").show();
		$("#investProm_tishi").show();
		$("#investProm_passforse").click(function(){
			$("#investProm_mengban").hide();
			$("#investProm_tishi").hide();
		});
		$("#investProm_OK").click(function(){
			if(yhq_type2!=""){
				var url5="/trade?token=#(session.token??)&bid="+id+"&unit="+$("#fenshu").val()+"&"+yhq_type2 + "=" + couponid + "&ip=" +ip_l;
			}else {
				var url5="/trade?token=#(session.token??)&bid="+id+"&unit="+$("#fenshu").val() + "&ip=" +ip_l;
			}
			console.log(url5);
			$.getJSON(url5, function(datainfo) {
				console.log(datainfo);
				if(datainfo.code=='success'){
					layer.msg(datainfo.msg,{icon:1,time:1000},function(){
						window.location.href="#(path)/app/page/personal-project";
					}); 
				}else{
					layer.msg(datainfo.msg,{icon:2,time:1000}); 
					$("#investProm_mengban").hide();
					$("#investProm_tishi").hide();
				}
			});
		});
	});
	
	//支付密码确认
	$("#investProm_passtrue").click(function(){
	  $("#investProm_OK").show();
	});
	$("#sliderValue").change(function(){
		$("#fenshu").val($("#sliderValue").html);
	});
//投资份数
  $$(function(){
	var $$sliderTrack = $$('#sliderTrack'),
		$$sliderHandler = $$('#sliderHandler'),
		$$sliderValue = $$('#sliderValue'),
		$$fenshu = $$('#fenshu');
	var totalLen = $$('#sliderInner').width(),
		startLeft = 0,
		startX = 0;
	$$sliderHandler
		.on('touchstart', function (e) {
			if(ableNumber == 0){
				startLeft = 0;
				startX = 0;
			}else{
				startLeft = parseInt($$sliderHandler.css('left')) * totalLen / 100;
				startX = e.changedTouches[0].clientX;
			}
		})
		.on('touchmove', function(e){
			var dist = startLeft + e.changedTouches[0].clientX - startX,
				percent;
			dist = dist < 0 ? 0 : dist > totalLen ? totalLen : dist;
			percent =  parseInt(dist / totalLen * 100);
			if(ableNumber == 0){
				$$sliderTrack.css('width', 0 + '%');
				$$sliderHandler.css('left', 0 + '%');
			}else{
				$$sliderTrack.css('width', percent + '%');
				$$sliderHandler.css('left', percent + '%');
			}
			$$sliderValue.text(percent);
			$$fenshu.val(Math.floor(percent / 100 * ableNumber));
			e.preventDefault();
			var amount = $$("#fenshu").val() * unit_amount;
			var yq_amount = (Number(amount)* Number(ratas) / 100 * day_limit / 360).toFixed(2);
			$$("#yq_amount").html(yq_amount);
		});
	$$("#fenshu").change(function(){
		var dist = $$("#fenshu").val(),
				percent;
			if(dist > ableNumber){
				alert("超过最大份数");
				$$("#fenshu").val(ableNumber);
				dist = ableNumber;
			}
			if(dist < 0){
				alert("份数不能小于0");
				$$("#fenshu").val(Math.floor(ableNumber/2));
				dist = ableNumber/2;
			}
			//dist = dist < 0 ? 0 : dist > totalLen ? totalLen : dist;
			console.log(dist);
			percent =  parseInt(dist / ableNumber * 100);  
			$$sliderTrack.css('width', percent + '%');
			$$sliderHandler.css('left', percent + '%');
			$$sliderValue.text(percent);
			//e.preventDefault();
			var amount = $$("#fenshu").val() * unit_amount;
			var yq_amount = (Number(amount)* Number(ratas) / 100 * day_limit / 360).toFixed(2);
			$$("#yq_amount").html(yq_amount);
	});
  });    
  
</script>

</body>
</html>
